<template>
  <div>
    <div class="login-background">
      <div class="login-card">
        <a-row>
          <a-col :span="12">
            <div class="login-card-bg">
              <div class="login-bg-title" style="margin-top: 8%;font-weight: Bold;">Noodle系统</div>
            </div>
          </a-col>
          <a-col :span="12">
            <a-card
              class="login-card"
              style="width:100%"
              :tab-list="tabListNoTitle"
              :active-tab-key="noTitleKey"
              @tabChange="key => onTabChange(key, 'noTitleKey')"
            >
              <div>

                <a-form
                  v-show="loginVisible"
                  :form="loginForm"
                  class="login-form"
                  @submit="handleLoginSubmit"
                >
                  <a-form-item class="center-item">
                    <div class="login-title">Login</div>
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      v-decorator="['username',{ rules: [{ required: true, message: '请输入用户名' }] },]"
                      placeholder="用户名"
                    >
                      <a-icon slot="prefix" type="user"/>
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      v-decorator="[ 'password',{ rules: [{ required: true, message: '请输入密码' }] },]"
                      placeholder="密码"
                      type="password"
                    >
                      <a-icon slot="prefix" type="lock"/>
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <!-- <a-form-item> -->
                    <a-checkbox
                      v-decorator="['remember',
                                            {
                                              valuePropName: 'checked',
                                              initialValue: false,
                                            },
                                          ]"
                    >记住账号
                    </a-checkbox
                    >
                    <!-- </a-form-item> -->
                  </a-form-item>

                  <a-form-item>
                    <a-button
                      class="login-form-button"
                      htmlType="submit"
                      type="primary"
                    >
                      登录
                    </a-button>
                  </a-form-item>
                  <!--                                    <a-form-item class="center-item">-->
                  <!--                                        没有账号？<span class="exchange-btn" @click="goRegister"-->
                  <!--                                    >去注册!</span-->
                  <!--                                    >-->
                  <!--                                    </a-form-item>-->
                </a-form>


                <!--                                注册，暂时用不到-->
                <a-form
                  v-show="!loginVisible"
                  :form="registerForm"
                  class="login-form"
                  @submit="handleRegisterSubmit"
                >
                  <a-form-item class="center-item">
                    <div class="login-title">注册</div>
                  </a-form-item>
                  <a-form-item label="角色">
                    <a-radio-group v-decorator="['role']">
                      <a-radio value="ROLE_ADMIN">
                        管理员
                      </a-radio>
                      <a-radio value="ROLE_TEACHER">
                        老师
                      </a-radio>
                      <a-radio value="ROLE_STUDENT">
                        学生
                      </a-radio>
                    </a-radio-group>
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      v-decorator="[
                                                'email',
                                                {
                                                  rules: [
                                                    { required: true, message: '请输入邮箱地址' },
                                                    {
                                                      pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                                                      message: '邮箱格式不正确',
                                                    },
                                                  ],
                                                },
                                              ]"
                      placeholder="邮箱地址"
                    >
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      v-decorator="[
                                                'username',
                                                { rules: [{ required: true, message: '请输入用户名' }] },
                                              ]"
                      placeholder="用户名"
                    >
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      v-decorator="[
                                                    'password',
                                                    {
                                                      rules: [
                                                        { required: true, message: '请输入密码' },
                                                        { min: 6, message: '至少6位密码' },
                                                      ],
                                                    },
                                                  ]"
                      placeholder="至少6位数密码，区分大小写"
                      type="password"
                    >
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      v-decorator="[
                                                'pwdConfirmed',
                                                {
                                                  rules: [
                                                    { required: true, message: '请再次确认密码' },
                                                    {
                                                      validator: (rules, value, callback) => {
                                                        this.handlePwdConfirmed(rules, value, callback);
                                                      },
                                                    },
                                                  ],
                                                },
                                              ]"
                      placeholder="重复确认密码"
                      type="password"
                    >
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-button
                      class="login-form-button"
                      htmlType="submit"
                      type="primary"
                    >
                      注册
                    </a-button>
                  </a-form-item>
                  <a-form-item class="center-item">
                    已有账号？<span class="exchange-btn" @click="goLogin">去登录!</span>
                  </a-form-item>
                </a-form>

              </div>
            </a-card>

          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import api from "./../../../common/api";
import {clearUser, getPSW, getUser, savePsw, saveToken, saveUser} from "./../../../common/store";

export default {
  name: "Login",
  data() {
    return {

      tabListNoTitle: [
        {
          key: 'ROLE_STUDENT',
          tab: '学员入口',
        },
        {
          key: 'ROLE_TEACHER',
          tab: '教师入口',
        },
        {
          key: 'ROLE_ADMIN',
          tab: '管理员入口',
        },
      ],
      noTitleKey: 'ROLE_STUDENT',
      loginVisible: true,

    };
  },
  beforeCreate() {
    this.loginForm = this.$form.createForm(this, {name: "normal_login"});
    this.registerForm = this.$form.createForm(this, {
      name: "normal_register",
    });
  },
  mounted() {
    let user = getUser(), psw = getPSW()
    if (user) {
      this.loginForm.setFieldsValue({
        username: user,
        password: psw,
        remember: true,
      });
    }
  },
  methods: {
    onTabChange(key, type) {
      this[type] = key;
    },
    callback(key) {
      console.log(key);
    },
    goLogin() {
      this.loginVisible = true;
    },
    goRegister() {
      this.loginVisible = false;
    },
    handlePwdConfirmed(rules, value, callback) {
      let loginpass = this.registerForm.getFieldValue("password");
      if (loginpass && loginpass !== value) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    },
    handleLoginSubmit(e) {
      let that = this;
      e.preventDefault();
      this.loginForm.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          that
            .$postCPG(api.login, {
              username: values.username,
              password: values.password,
              role: that.noTitleKey
              // username: "yorkxi_qyseu@163.com",
              // password: "082009qy"
            })
            .then((res) => {
              if (res) {
                saveToken(res.access_token);
                if (values.remember) {
                  saveUser(values.username);
                  savePsw(values.password)
                } else {
                  if (getUser()) {
                    clearUser();
                  }
                }
                this.$message.success("登录成功！");
                // console.log(this.noTitleKey)
                if (this.noTitleKey === "ROLE_STUDENT") {
                  this.$router.push("/train/student/courses");
                } else if (this.noTitleKey === "ROLE_TEACHER") {
                  this.$router.push("/train/teacher/courses");
                } else if (this.noTitleKey === "ROLE_ADMIN") {
                  //TODO:修改成管理员页面
                  this.$router.push("/admin/teacher");
                }

              }
            });
        }
      });
    },
    handleRegisterSubmit(e) {
      let that = this;
      e.preventDefault();
      this.registerForm.validateFields((err, values) => {
        if (!err) {
          that
            .$postCPG(api.trainRegist, {
              email: values.email,
              login: values.username,
              password: values.password,
              role: values.role
            })
            .then((res) => {
              this.$message.success("注册成功！");
              this.loginVisible = true;
            });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
// "~": 表示相对于@（别名，一般是src目录）下的
@import "~@/styles/global.less";

.login-background {
  height: 100vh;
  background: url("./../../../assets/image/train/loginBg.png") no-repeat left center;
  overflow: hidden;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-card {
    height: 55vh;
    width: 43vw;
    background-color: white;
    border-radius: 2px;
    overflow: hidden;

    .login-card-bg {
      display: flex;
      flex-direction: column;
      height: 55vh;
      background: url("./../../../assets/image/train/loginCard.png") no-repeat;
      background-size: cover;

      .login-bg-title {
        font-size: 13px;

        text-align: left;
        margin-left: 8%;
        letter-spacing: 2px;
        color: #131416;
        flex: 1;
      }
    }

    .login-card {
      /*height: 55vh;*/
      /*display:flex;*/
      /*flex-direction:column;*/

      .login-form {
        height: 45vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 80%;
        margin: 0 auto;

        .login-title {
          font-weight: bold;
          font-size: 21px;
          color: #23D1A5;
        }

        .ant-btn {
          height: 38px;
        }

        .ant-checkbox-inner {
          border-radius: 0;
        }

        .login-form-button {
          width: 100%;
        }

        .center-item {
          text-align: center;
        }

        .exchange-btn {
          font-weight: 500;
          color: @primary-color;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }
      }

      /*.tab-card{*/
      /*    flex:1*/
      /*    !*height: 50vh;*!*/
      /*    */
      /*}*/

    }


  }
}


.half-circle {
  width: 12vw;
  height: 6vw;
  background: #1bd0a2;
  border-radius: 0px 0px 12vw 12vw;
  position: fixed;
  left: 56vw;
  top: -2vw;
}

.quarter-circle {
  width: 6vw;
  height: 6vw;
  background: #1bd0a2;
  border-radius: 12vw 0px 0px 0px;
  position: fixed;
  right: 0;
  bottom: 0;
}

/deep/ .ant-input {
  height: 38px;
  border-radius: 30px;
}
</style>
